<template>
    <div class="step-1">
        <div class="mg-b-20">
            <span class="mg-r-20">核算时间</span>
            <el-date-picker v-model="dateValue" value-format="YYYY-MM" type="month" placeholder="选择日期" />
        </div>
        <el-upload
            v-model:file-list="fileList"
            :action="uploadAction"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
            :on-success="fileSuccess"
            :headers="{ Authorization: 'Bearer' + ' ' + token }"
            :on-error="fileEerror"
            :show-file-list="false"
            :data="{ month: dateValue }"
            :before-upload="handleBeforeUpload"
        >
            <el-button type="primary" :disabled="!dateValue">
                <el-icon>
                    <Upload />
                </el-icon>
                点击导入
            </el-button>
            <template #tip>
                <div class="el-upload__tip fc-lightgray mg-l-20">
                    文件后缀名必须为xlsx，文件大小不得大于10M，最多支持导入1000条数据
                </div>
            </template>
        </el-upload>
        <div class="hint fc-orange mg-t-20">*文件超过10M或者超过1000条数据</div>
        <div class="hint-box flex mg-t-20">
            <div class="mg-r-5">
                <el-icon class="fc-orange">
                    <WarningFilled />
                </el-icon>
            </div>
            <div>
                <div>必须填写表头方便后续匹配，也可点击<a class="fc-blue" download="https://bullet001.oss-cn-shanghai.aliyuncs.com/template/excel/acadf588-9da9-4470-923a-96e3a52ef576.xlsx" href="https://bullet001.oss-cn-shanghai.aliyuncs.com/template/excel/acadf588-9da9-4470-923a-96e3a52ef576.xlsx">下载薪资表模版</a>帮助您快速导入。</div>
                <div>请核对上传文件首行内容，避免表头错误影响字段匹配。</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import global from '@/utils/global'
import { ElMessage } from 'element-plus'
console.log(212121, global.token);
export default defineComponent({
    props: {

    },
    components: {
    },
    data() {
        return {
            dateValue: '',
            fileList: [],
            token: global.token,
            limit: 10
        }
    },
    computed: {
        uploadAction() {
            return process.env.VUE_APP_BASE_URL + '/rest/pay/company/employee/salary/import-employee-salary'
        }
    },
    watch: {

    },
    methods: {
        handleBeforeUpload(file: any) {
            console.log(111, file);
            if (file.name.toLowerCase().endsWith('.xls') || file.name.toLowerCase().endsWith('.xlsx')) {
                if (file.size <= this.limit * 1024 * 1024) {
                    return true
                } else {
                    ElMessage.error(`请上传小于${this.limit}M大小的文件`)
                    return false
                }
            } else {
                ElMessage.error('请上传格式为xls或xlsx的文件')
                return false
            }

        },
        handlePreview() {

        },
        handleRemove() {

        },
        beforeRemove() {

        },
        handleExceed() {

        },
        onUpFile(ev: any) {
            console.log(ev);
        },
        fileSuccess(res: any, file: any) {
            console.log(res, file);
            if (res.code === 500 && res.data?.length) {
                this.$emit('uploadData', {
                    step: 2,
                    data: res.data
                })
            } else if(res.code === 200) {
                this.$emit('uploadData', {
                    step: 3,
                })
            }
        },
        fileEerror() {
            ElMessage.error('文件上传失败')
        },
    }
})

</script>
<style lang="stylus" scoped>
.hint-box
    background rgba(255, 126, 104, 0.1)
    border-radius 4px
    padding 12px
.el-upload__tip
    display inline-block
</style>